<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maxinum-scale=1,user-scalable=no">
    <title>15弹出框和警告框插件</title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
    <style>
        a:focus{
            outline: none;
        }
        #view {
            width: 300px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body style="margin:200px;">

    <!-- 首先设置事件 data-toggle  title标题 content显示内容 placement设置显示的位置  -->
    <div id="view">
        <button id="b" class="btn btn-danger btn-lg" data-toggle="popover" title="Bootstrap"
            data-content="Bootstrap最帅Bootstrap最帅Bootstrap最帅Bootstrap最帅Bootstrap最帅Bootstrap最帅Bootstrap最帅Bootstrap最帅Bootstrap最帅Bootstrap最帅Bootstrap最帅Bootstrap最帅"
            data-placement="right"
        >点击弹出/隐藏弹出框</button>
    </div>
   
    <button id="btn">按钮</button>

    <!-- 警告框 -->
    <!-- <div class="alert alert-warning fade in">
        <button class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
        <p>警告：您的浏览器不支持！</p>
    </div> -->

    <div id="alert" class="alert alert-warning fade in">
        <button class="close">
            <span>&times;</span>
        </button>
        <p>警告：您的浏览器不支持！</p>
    </div>

    <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
    <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
    <script type="text/javascript">
        
       $('#b').popover({
           viewport:{
            //    设置弹出框的间距
               selector : '#view',
               padding :10,
           }
       });

       $('#btn').on('click',function(){
           $('#b').popover('toggle')          // 反转
       })

       $('#b').on('show.bs.popover',function(){     // 也是四种模式 
           alert('show');
       })

       // 警告框(第二种方法  使用脚本)
       $('.close').on('click',function(){
           $('#alert').alert('close');
       })

       $('#alert').on('closed.bs.alert',function(){
           alert('closed......');
       })




     </script>
</body>
</html>